/**
* Created by yyr on 2018/1/15
*已设立基金编辑选项卡基金支出  index页
*/
<template>
    <div>
        <div class="ca-box-border-top-none ca-p-22" v-if="!isExpenditureEdit">
            <el-row>
                <el-col :span="12" class="ca-title">
                    <h3>基金支出</h3>
                    <div class="clear"></div>
                </el-col>
                <el-col :span='12' class="ca-align-right">
                    <el-button type="text" :disabled="!isAuthExpenditureEdit" @click="fundExpenditureEdit()" class="ca-edit-btn el-icon-edit">编辑</el-button>
                </el-col>
            </el-row>
            <div>
                <el-table
                    :data="fundExpenditureList"
                    stripe
                    border
                    style="width:100%" class="table_p_01 ca-table">
                    <el-table-column
                        show-overflow-tooltip
                        prop="costTime"
                        label="支出时间">
                        <template slot-scope="scope">
                            {{$moment( scope.row.costTime ).format("YYYY-MM-DD")}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="支出类型">
                        <template slot-scope="scope">
                            {{scope.row.costType | getNameById('fundCost')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="expenditure_amount"
                        label="金额(万元)">
                        <template slot-scope="scope">
                            {{scope.row.money | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注">
                        <template slot-scope="scope">
                            <el-tooltip placement="left" style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                <div slot="content" style="width:200px">{{scope.row.remarks}}</div>
                                <span>{{scope.row.remarks}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <csFundExpenditureEdit v-if="isExpenditureEdit" @isEdit="isEdit" @addRedDot="addRedDot"></csFundExpenditureEdit>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import {isNoAuth} from '__service/utils';
    export default {
        data() {
            return {
                isAuthExpenditureEdit: isNoAuth('已投资基金-基金支出-编辑'),
                isExpenditureEdit: false,//选项卡[2]基金支出
                fundExpenditureList: [],
                itemId: this.$route.params.fundId,
            }
        },
        props: {
        },
        created() {
            this.getFundExpenditure();
        },
        mounted() {
        },
        methods: {
            //获取基金支出列表
            getFundExpenditure() {
                apiHttp(api.FUND_EXPENDITURE,{fundId: this.itemId}).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundExpenditureList = ret.data;
                    }
                })
            },
            fundExpenditureEdit() {
                this.isExpenditureEdit = true;
            },
            isEdit(val) {
                this.isExpenditureEdit = val;
                this.getFundExpenditure();
            },
            addRedDot() {
                this.$emit('addRedDot', 8)
            }
        },
        components: {
            'csFundExpenditureEdit': require('./edit.vue'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
